<template>
    <div class="m-evaluetion">
        <div class='m-evalueList'
         v-for="(item,index) in evaluate" :key="index"
        :class="{'m-good':item.sta=='0','m-nobad':item.sta=='1','m-bad':item.sta=='2'}">
            <div>
                <img :src="item.headimgurl || require('@/assets/images/p_02.jpg')"/>
                {{item.user_name || '美业通用户'}}
            </div>
            <span>
                {{item.create_time.split('.')[0]}}
                <!-- 产品名称：【疗程卡】护理套餐 -->
            </span>
            <p>{{item.evaluation_content}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:['evaluate'],
    data () {
        return {

        }
    }
}
</script>
<style lang="less" scoped>
.m-evaluetion{
    border-bottom: 1px solid @background-gray;
    padding: 0.4rem 0;
}
.m-evalueList{
    margin-bottom: .4rem;
    background: white;
    padding: .6rem;
    position: relative;
}
.m-evalueList div img{
	display: inline;
	margin-right: .1rem;
	vertical-align: middle;
	border-radius: 100%;
	width: 48px;
	height: 48px;
}
.m-evalueList span{
    color: #cacaca;
    font-size: .8pc;
    display: inline-block;
    margin: .1rem auto;
}
.m-evalueList::after{
    position: absolute;
    top: .2rem;
    right: .6rem;
    z-index: 2;
    content: '';
    width: 24pt;
	height: 24pt;
	background-image: url(../../assets/images/icons.png);
	background-position: -310px -0px;
	background-size: 550px;
	background-repeat: no-repeat;
	text-align: center;
	line-height: 24pt;
}
.m-evalueList.m-good::after{
    background-position: -310px -0px;
}
.m-evalueList.m-nobad::after{
    background-position: -400px -0px;
}
.m-evalueList.m-bad::after{
    background-position: -492px -0px;
}
</style>
